<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检测用户名是否被占用</title>
<script src="../JS/vue.js"></script>
<script type="text/javascript" src="../JS/axios.min.js"></script>

</head>
<body>
<style type="text/css">
body{
font-family:微软雅黑;
font-size:14px;}
</style>


</head>
<body>
<div id="box">
	<h2>检测用户名</h2>
	<form>
		<label for="type">用户名：</label>
		<input type="text" v-model="username" size="10">
		<span :style="{color:fcolor}">{{info}}</span>
	</form>
</div>
<script type="text/javascript">
var vm = new Vue({
	el: '#box',
	data: {
		username: '',
		info: '',
		fcolor: ''
	},
	watch: {
		username: function(val){
			axios({
				method: 'get',
				url:'user.json'
			}).then(function(response){
				var nameArr = response.data;//获取响应数据
				var result = true;//定义变量
				for(var i=0;i<nameArr.length;i++){
					if(nameArr[i].name == val){//判断用户名是否已存在
						result = false;//为变量重新赋值
						break;//退出for循环
					}
				}
			    if(!result){    //用户名已存在
				    this.info = '该用户名已被他人使用！';
					this.fcolor = 'red';
			    }else{       //用户名不存在
			        this.info = '恭喜，该用户名未被使用！';
					this.fcolor = 'green';
			    }
			}.bind(this));
		}
	}
});
</script>








</body>
</html>